<template>
	<view>
		<view class="balanceLog">
			<view class="z-flex-0 z-flex-x-s-a" style="background-color: #FFF;">
				<!-- <van-tabs ellipsis="{{false}}" sticky color="#62CB81" active="{{ active }}" bind:change="onChange">
					<van-tab title="消费记录"></van-tab>
					<van-tab title="充值记录"></van-tab>
				</van-tabs> -->
				<u-sticky bgColor="#fff">
				<u-tabs
					:list="cate"
					keyName="name"
					lineWidth="40"
					lineColor="#62CB81"
					@change="onChange"
					:activeStyle="{
						color: '#5B5B5C',
						fontWeight: 'bold'
					}"
					:inactiveStyle="{
						color: '#A4A9B7',
						transform: 'scale(1)'
					}"
					itemStyle="padding-left: 30px; padding-right:30px; height: 34px;margin-top:12rpx;"
				></u-tabs>
				</u-sticky>
			</view>
			<view class="main-box">
				<scroll-view class="scroll-box" :scroll-y="true" :show-scrollbar="false" :enhanced="true" @scrolltolower="more">
					<block v-if="active == 0">
						<view class="each z-margin-t-24 z-padding-lr-32 z-padding-tb-24" v-for="(item,index) in list">
							<view>
								<view class="text-b">{{ item.memo }}</view>
								<view class="text-tint z-margin-t-8"></view>
							</view>
							<view>
								<view class="text-b z-text-r" v-if="tool.includes(item.money,'-')">{{ item.money }}</view>
								<view class="text-b z-text-r" v-else>+{{ item.money }}</view>
								<view class="text-tint z-margin-t-8 z-font-22">{{ tool.formatTime(item.createtime) }}</view>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="each z-margin-t-24 z-padding-lr-32 z-padding-tb-24" v-for="(item,index) in list">
							<view>
								<view class="text-b">充值方式：微信小程序</view>
								<view class="text-tint z-margin-t-8 z-font-22" v-if="item.paytype == 0" @tap="copy(item.orderId)">
									订单：{{ item.orderId }}
								</view>
							</view>
							<view>
								<view class="text-b z-text-r">{{ item.price }}</view>
								<view class="text-tint z-margin-t-8 z-font-22">{{ tool.formatTime(item.createtime) }}</view>
							</view>
						</view>
					</block>
					<!-- <van-empty description="暂无记录" v-if="finish && list.length === 0" /> -->
					<u-empty v-if="finish && list.length === 0" mode="" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../utils/http';
export default {
	data() {
		return {
			active: 0,
			list: [],
			finish: false,
			loading: false,
			page: 1,
			cate: [
				{ name: '消费记录' },
				{ name: '充值记录' },
			]
		};
	},
	onLoad(options) {
	    this.reload()
	},
	methods: {
		onChange(event) {
			this.active = event.index
			this.reload();
		},

		reload() {
			this.list = [],
			this.page = 1,
			this.finish = false
			this.getList();
		},
		more() {
			this.page = ++this.page
			this.getList();
		},
		copy(e) {
			uni.setClipboardData({
				data: e,
				success(res) {
					this.util.toast('已复制');
				}
			});
		},
		getList() {
			if (this.finish) {
				return;
			}
			if (this.loading) {
				return;
			}
			this.loading = true
			http.get(this.active == 0 ? 'index/moneylist' : 'recharge/list', {
				page: this.page
			})
				.then((res) => {
					if (res.data.length === 0) {
						this.finish = true
					}
					let arr = this.list.concat(res.data);
					this.list = arr
				})
				.finally((res) => {
					this.loading = false
				});
		}
	}
};
</script>

<style>
page {
	background-color: #edf1f4;
}
.balanceLog {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 90rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}

.main-box {
	flex: 1;
	overflow: hidden;
}
.scroll-box {
	height: 100%;
}
.each {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 622rpx;
	height: 84rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	margin: auto;
}
.text-b {
	font-size: 28rpx;
	font-weight: bold;
	color: #1c274c;
}
.text-tint {
	font-size: 24rpx;
	font-weight: 500;
	color: #a4a9b7;
}
</style>
